<div id="form<?php echo $uniqid;?>" style="padding-top: 20px">
    <el-form :model="params" method="post" size="small" label-width="140px" @submit.native.prevent label-position="right">
        <el-form-item label="门店名称：">
            <el-input v-model="params.name" size="small" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="门店图片：">
            <template slot-scope="scope">
                <div class="display-flex">
                    <div class="img-box" v-if="images.length>0" v-for="(vo,index) in images">
                        <a class="linkWrapper" target="_blank" :href="vo" title="查看原图">
                            <img height="70px" :src="vo+'?imageView2/1/w/100/h/100'"></a>
                        <div class="img-box-del" @click="deleteImages(index)">
                            <img class="label-auto" src="/static/Easyui/themes/2019/icons/del_tr.gif">
                        </div>
                    </div>
                    <div class="add-image-button">
                        <a class="btn btn-default btn-lg" @click="uploadBox('storeEditVm.images')" href="javascript:void(0);">
                            <i class="iconfont icon-tianjia"></i>
                        </a>
                    </div>
                </div>
            </template>
        </el-form-item>
        <el-form-item label="联系人：">
            <el-input v-model="params.realname" size="small" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：">
            <el-input v-model="params.phone" size="small" maxlength="11" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="所在区域：">
            <el-select v-model="params.province_id" style="max-width: 140px;" @change="((val)=>{areaChang(1,val)})" size="mini" placeholder="请选择省份" popper-class="zindex_popper">
                <el-option :value='0' :key='0' label="请选择省份"></el-option>
                <el-option
                        v-for="item in prov"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-select v-model="params.city_id" style="max-width: 160px;" @change="((val)=>{areaChang(2,val)})" size="mini" placeholder="请选择城市" popper-class="zindex_popper" v-if="params.province_id>0">
                <el-option :value='0' :key='0' label="请选择城市"></el-option>
                <el-option
                        v-for="item in city"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id" v-if="item.pid == params.province_id">
                </el-option>
            </el-select>
            <el-select v-model="params.area_id" style="max-width: 160px;" size="mini" placeholder="请选择区县" popper-class="zindex_popper" v-if="params.province_id>0 && params.city_id>0">
                <el-option :value='0' :key='0' label="请选择区县"></el-option>
                <el-option
                        v-for="item in area"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id" v-if="item.pid == params.city_id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="详细地址：">
            <el-input v-model="params.address" placeholder="请输入详细地址..，不需要省市县" size="small" style="width: 500px"></el-input>
        </el-form-item>
        <el-form-item label="营业时间：">
            <el-time-select
                    placeholder="开始营业时间"
                    v-model="openhours_start"
                    :picker-options="{
                      start: '00:00',
                      end: '24:00',
                      step: '00:15',
                    }"
                    popper-class="zindex_popper"
                    value-format="HH:mm"
                    size="small">
            </el-time-select>
                至
            <el-time-select
                    placeholder="结束营业时间"
                    v-model="openhours_end"
                    :picker-options="{
                      start: '00:00',
                      end: '24:00',
                      step: '00:15',
                      minTime: openhours_start
                    }"
                    popper-class="zindex_popper"
                    value-format="HH:mm"
                    size="small">
            </el-time-select>
        </el-form-item>
        <el-form-item label="每周营业：">
            <el-checkbox-group v-model="openweeks" size="mini">
                <el-checkbox-button style="margin-right: 0;" v-for="(week,index) in openweeksOptions" :label="week.id" :key="week.id">{{week.name}}</el-checkbox-button>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="门店管理员：">
            <el-tag v-for="(member,index) in member_names"
                    :key="member.name"
                    closable="true"
                    size="medium"
                    @close="removeMember(index)">
                {{member.name}}
            </el-tag>
            <el-button class="button-new-tag" size="mini" @click="addMember">+ 添加管理员</el-button>
        </el-form-item>
        <el-form-item label="门店状态：">
            <el-switch
                    style="display: block"
                    v-model="params.status"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="启用"
                    inactive-text="禁用"
                    :active-value="1"
                    :inactive-value="0">
            </el-switch>
        </el-form-item>
        <el-form-item label="支持配送方式：">
            <el-checkbox v-model="params.store" :true-label="1" :false-label="0" label="商家配送"></el-checkbox>
            <el-checkbox v-model="params.selfetch" :true-label="1" :false-label="0" label="到店/自提"></el-checkbox>
        </el-form-item>
        <el-form-item label="服务范围：" v-if="params.store > 0">
            <el-radio v-model="params.service_type" :label="0">按行政地区</el-radio>
            <el-radio v-model="params.service_type" :label="1">按服务半径</el-radio>
        </el-form-item>
        <el-form-item label="服务半径：" v-if="params.store > 0 && params.service_type > 0">
            <el-input type="number" autocomplete="off" size="small" v-model.number="params.service_radius" step="50" style="width: 200px; text-align: right;">
                <template slot="append">米</template>
            </el-input>
        </el-form-item>
        <el-form-item label="行政地区：" v-if="params.store > 0 && params.service_type == 0">
            <template slot-scope="scope">
                <el-button class="button-new-tag" size="mini" @click="selectArea">选择行政地区</el-button>
                <div class="display-flex">
                    <span style="padding-right: 10px;" v-for="area in currentSelectAreaRows">{{area.name}}</span>
                </div>
            </template>
        </el-form-item>
    </el-form>
    <div id="storeEditdlg" class="easyui-dialog" style="width:700px; height:580px;" title="信息框" closed="true"></div>
</div>
<script>
    var storeEditVm = new Vue({
        el: '#form<?php echo $uniqid;?>',
        data: {
            images: [],
            params: JSON.parse('<?php echo addslashes($dataset);?>'),
            prov: JSON.parse('<?php echo addslashes($prov);?>'),
            city: JSON.parse('<?php echo addslashes($city);?>'),
            area: JSON.parse('<?php echo addslashes($area);?>'),
            openweeks: [],
            openweeksOptions:[
                {id:'1',name:'星期一'},
                {id:'2',name:'星期二'},
                {id:'3',name:'星期三'},
                {id:'4',name:'星期四'},
                {id:'5',name:'星期五'},
                {id:'6',name:'星期六'},
                {id:'7',name:'星期日'},
            ],
            member_names: [],
            member_ids:[],
            openhours_start:'09:00',
            openhours_end:'22:00',
            currentSelectAreaIds:[],
            currentSelectAreaRows:[],
        },
        mounted(){
            this.init();
        },
        methods: {
            init(){
                this.params.store = parseInt(this.params.store);
                this.params.selfetch = parseInt(this.params.selfetch);
                this.params.status = parseInt(this.params.status);
                this.params.service_type = parseInt(this.params.service_type);
                this.images = this.params.images_arr?this.params.images_arr:[];
                this.openweeks = this.params.openweeks_arr?this.params.openweeks_arr:[];
                this.currentSelectAreaIds = this.params.service_area_ids_arr;
                this.currentSelectAreaRows = this.params.service_area_names_arr;
                let openhours_arr = this.params.openhours.split(' - ');
                if(openhours_arr.length > 1){
                    this.openhours_start = openhours_arr[0];
                    this.openhours_end = openhours_arr[1];
                }
                if (this.params.members.length){
                    for (let i = 0; i<this.params.members.length; i++){
                        this.member_ids.push(this.params.members[i].id);
                        this.member_names.push({id:this.params.members[i].id, name:this.params.members[i].nickname});
                    }
                }
            },
            deleteImages(index){
                this.images.splice(index, 1);
            },
            areaChang:function (type, value) {
                if(type === 1){
                    this.params.city_id = 0;
                    this.params.area_id = 0;
                }
                if(type===2){
                    this.params.area_id = 0;
                }
            },
            removeMember:function (key) {
                if(this.member_ids.length > 1){
                    this.member_ids.splice(key,1);
                    this.member_names.splice(key,1);
                }else{
                    $.messager.alert('提示','至少要保留1位门店管理员','warning');
                }
            },
            selectArea: function (){
                $("#storeEditdlg").dialog({
                    title: '选择服务行政地区',
                    closed: false,
                    width: 700,
                    height:600,
                    cache: false,
                    href: '/admin/store/getservicearea?id='+this.params.id,
                    modal: true,
                    buttons: [{
                        text: '确定',
                        id: 'storeAreasubmit',
                        iconCls: 'icon-ok',
                    }, {
                        text: '取消',
                        iconCls: 'icon-no',
                        handler: function () {
                            $("#storeEditdlg").dialog('close');
                        }
                    }]
                });
            },
            addMember: function (){
                $("#storeEditdlg").dialog({
                    title: '添加管理员',
                    closed: false,
                    width: 800,
                    height:638,
                    cache: false,
                    href: '/admin/store/getmemberlist',
                    modal: true,
                    buttons: [{
                        text: '确定',
                        id: 'storeMastersubmit',
                        iconCls: 'icon-ok',
                    }, {
                        text: '取消',
                        iconCls: 'icon-no',
                        handler: function () {
                            $("#storeEditdlg").dialog('close');
                        }
                    }]
                });
            },
            submit: function(){
                this.params.openhours = this.openhours_start + ' - ' + this.openhours_end;
                this.params.openweeks = this.openweeks.join(',');
                this.params.images = this.images.join(';');
                if(this.params.store>0){
                    if(this.params.service_type>0){
                        this.params.service_area_ids = '';
                    }else{
                        this.params.service_area_ids = this.currentSelectAreaIds.join(',');
                        this.params.service_radius = 0;
                    }
                }
                this.params.member_ids = this.member_ids;
                let act = this.params.id ? 'edit' : 'add';
                $.post('/admin/store/' + act, this.params, function(data){
                    if(data.ret===0){
                        $.messager.show({
                            title:'提示',
                            msg:data.msg,
                            timeout:3000,
                            showType:'slide'
                        });
                        $('#<?php echo $uniqid;?>').form('clear');
                        $("#storedlg").dialog('close');
                        storeReload();
                    }else{
                        $.messager.alert('提示',data.msg,'warning');
                    }
                });
            }
        }
    });
    $('#storesubmit').click(function(data){
        storeEditVm.submit();
    })
</script>
<style>
    .zindex_popper{
        z-index: 20000 !important;
    }
</style>